<template>
	<view class="comment">
		<form @submit="submitComment" @reset="formReset">
		
			<view class="goods-list">
				<view class="item" v-for="(goods, index) in detail.goods" :key="index">
					<view class="goods-info">
						<view class="goods-img">
							<image :src="goods.original_image" mode=""></image>
							
						</view>
						<view class="goods-name">{{goods.goods_name}}</view>
					</view>

					<view class="score">
						<view>描述相符： </view>
						<view class="mui-icon iconfont icon-xingxing" :class="sindex<goods.score?'text-theme':'text-gray'" @tap="changeScore(goods, sindex)" v-for="(s, sindex) in 5" :key="sindex"></view>
					</view>

					<view class="content">
						<textarea :name="'goods['+goods.goods_id+'][content]'" v-model="goods.content" placeholder="分享你的购买心得" />
						
					</view>

					<view class="upload-img">
						<view class="item" v-for="(img, imgIndex) in goods.img" :key="imgIndex">
							<image :src="img" mode="aspectFill"></image>
						</view>
						<view class="item upload">
							<image src="../../static/upload_icon.png" @tap="uploadImg(index)"  mode="aspectFill"></image>
							
						</view>
					</view>
					<input type="hidden" class="hidden" :name="'goods['+goods.goods_id+'][score]'" v-model="goods.score" />
					<input type="hidden" class="hidden" :name="'goods['+goods.goods_id+'][content]'" v-model="goods.content" />
					<input type="hidden" class="hidden" :name="'goods['+goods.goods_id+'][img]'" :value="goods.img.toString()" />
				</view>
				
			</view>

			<view class="bus-info">
				<view class="bus-title">
					<view  class="iconfont icon-shangjia"></view>
					<view class="bus-name">{{detail.business_name}}</view>
				</view>
				<view class="service-score">
					服务态度：
					<view class="mui-icon iconfont icon-xingxing" :class="sindex<service_score?'text-theme':'text-gray'" @tap="service_score = sindex+1" v-for="(s, sindex) in 5" :key="sindex"></view>
				</view>
				<view class="shipping-score">
					发货速度：
					<view class="mui-icon iconfont icon-xingxing" :class="sindex<shipping_score?'text-theme':'text-gray'" @tap="shipping_score = sindex+1" v-for="(s, sindex) in 5" :key="sindex"></view>
				</view>
			</view>	
			<button formType="submit" class="fixed-bottom-btn">提交评价</button>
		<!-- <view class="fixed-bottom-btn" @tap="submitComment()">提交评价</view> -->
			<input type="hidden" class="hidden" name="service_score" v-model="service_score" />
			<input type="hidden" class="hidden" name="shipping_score" v-model="shipping_score" />
			<input type="hidden" class="hidden" name="order_id" v-model="order_id" />
		</form>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				order_id : "",
				detail:[],
				service_score:'',
				shipping_score:'',
				imgSrc: [],
				img_index: '',
			};
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.getDetail();
		},
		methods: {
			//获取订单详情
			getDetail: function(){
				
				var that = this;
				var url =  'order/detail';
				Request.send({
					url: url,
					data: {order_id: that.order_id},
					sCallback: function(res) {
						res.data.goods.forEach(function(item){
							item.score = '';
							item.content = '';
							item.img = []
						})
						that.detail = res.data;
					}
				})
			},
			//改变商品评分
			changeScore: function (goods, index){
				goods.score = index+1;
			},
			//提交评价
			submitComment: function(e){
				console.log(e);
				var formData = e.detail.value;
				
				Request.send({
					url: 'order/comment',
					data: formData,
					sCallback: function(res) {
						Request.alert(res.msg, (res) => {
							uni.navigateBack({});
						})
					}
				})
				
			},
			//上传图片
			uploadImg: function(index) {
				this.img_index = index;
				console.log(index);
				var imgs = this.detail.goods[index]['img'];
				if(imgs.length >= 3) {
					Request.alert('最多上传3张');
					return;
				}
				var that = this;
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'],
					success(obj) {
						console.log(obj);
						Request.uploadImg({
							data: obj.tempFilePaths[0],
							sCallback: function(res) {
								that.detail.goods[index]['img'].push(res.data.url);
							}
						})
					},
					fail(e) {
						console.log('err');
						console.log(e);
						Request.alert('图片选择出错');
					}
				})
				
				
			}	
		}
	}
</script>

<style>
	
	.hidden{
		display: none;
	}
	.comment{
		margin-bottom: 100upx;
		
	}
	
	.goods-info{
		display: flex;
		flex-direction: row;
		padding: 20upx;
	}
	
	.goods-list .item{
		border-bottom: 1upx solid #eee;
		background: #fff;
	}
	
	.goods-info .goods-img image{
		width: 120upx;
		height: 120upx;
	}
	
	.goods-info .goods-name{
		color: #666;
		padding-left: 20upx;
	}
	
	.goods-list .score{
		display: flex;
		flex-direction: row;
		padding: 0 20upx;
		align-items: center;
	}
	
	.icon-xingxing{
		font-size:50upx;
	}
	
	.bus-info{
		background: #fff;
		margin-top: 20upx;
	}
	
	.bus-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20upx;
		height: 80upx;
		border-bottom: 1upx solid #eee;
	}
	
	.service-score, .shipping-score{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20upx;
	}
	
	.upload-img{
		display: flex;
		flex-direction: row;
	}
	
	.upload-img .item{
		width: 180upx;
		height: 180upx;
		
		padding: 10upx;
	}
	
	.upload-img .item image{
		max-height: 160upx;
		max-width: 160upx;
	}
	
	.content{
		width: 100%;
		padding: 20upx;
		display: flex;
		box-sizing: border-box;
	}
	
	textarea{
		flex: 1;
		font-size: 28upx;
		/* border: 1upx solid red; */
		height: 120upx;
		overflow-y: scroll;
	}
</style>
